<template>
	<view class="content">
		<!-- #ifdef MP-WEIXIN -->
		<vr-banner :bannerList="roomInfo.picUrl" :videoUrl="roomInfo.videoUrl" :roomName="roomInfo.apartmentName"></vr-banner>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<vr-banner :bannerList="roomInfo.picUrl" :vrPicUrl="roomInfo.vrPicUrl" :vrUrl="roomInfo.vrUrl" :videoUrl="roomInfo.videoUrl" :roomName="roomInfo.apartmentName"></vr-banner>
		<!-- #endif -->
		<view class="roomInfo">
			<view class="name">{{roomInfo.apartmentName}}</view>
			<view class="service row">
				<view class="tabbox">
					<text class="tab" v-for="(tag,i) in roomInfo.tags" :key="'tag'+i">{{tag}}</text>
				</view>
				<view class="price"><text class="yellow">{{roomInfo.price??0}}</text>元/月起</view>
			</view>
		</view>
		<view class="address">
			<uni-list>
			    <uni-list-item :title="roomInfo.address" :thumb="$imgUrl + '/icon/addr.png'" thumb-size="sm" link @click="$Foundation.toMapAPP(roomInfo.lat,roomInfo.lon,roomInfo.address)"></uni-list-item>
				<uni-list-item class="youhui" v-if="roomInfo.discountTitle" :title="roomInfo.discountTitle" :thumb="$imgUrl + '/icon/preferential.png'" link @click="openPoup"></uni-list-item>
			</uni-list>
		</view>
		<view class="mainBox">
			<view class="roomTypeBox">
				<view class="mainTit">门店房型</view>
				<view class="typeList">
					<u-scroll-list :indicator="false">
						<view class="list" v-for="(item,i) in layoutInfos" :key="i" @click="goRoomTypeDetail(item.layoutId)">
							<view class="pic">
								<image class="img" mode="aspectFill" :src="$filters.oosImgZip(item.picUrl)"></image>
								<view class="full" v-if="item.isFullRoom">满房</view>
							</view>
							<view class="roomMess">
								<view class="name">{{item.layoutName}}</view>
								<view class="tabbox">
									<view class="area">{{item.houseTypeName}} | {{item.spaceMin}}㎡</view>
									<view class="price">
										<text class="yellow">{{item.price??0}}</text>元/月起
									</view>
								</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<view class="introBox">
				<view class="mainTit">周边配套</view>
				<view class="intro">
					{{roomInfo.roomAssets}}
				</view>
			</view>
			<view class="introBox jtlx">
				<view class="mainTit">交通路线</view>
				<view class="intro">
					{{roomInfo.transportLine}}
				</view>
			</view>
			<view class="installationBox">
				<view class="mainTit">门店配置</view>
				<public-facilities :facilitiesList="roomInfo.roomsFacilities"></public-facilities>
			</view>
			<view class="erPicBox" v-if="roomInfo.qrCodeUrl">
				<view class="mainTit">联系管家</view>
				<view class="pic" @click="$Foundation.previewImgs([roomInfo.qrCodeUrl])">
					<image class="img" :src="roomInfo.qrCodeUrl" mode=""></image>
				</view>
			</view>
			<view class="roomTit">推荐门店</view>
			<roomList :roomsList="roomsList" @getList="getRoomList"></roomList>
		</view>
		<view class="btnBox row">
			<button class="phone" @click="$Foundation.call(roomInfo.storeTel)">拨打电话</button>
			<button class="look" type="primary" @click="appointment">预约看房</button>
		</view>
	</view>
	<uni-popup ref="popup" type="bottom">
		<view class="popBox">
			<view class="popTit">{{roomInfo.discountTitle || '优惠活动规则'}}</view>
			<view class="popTxt">{{roomInfo.discountInfo}}</view>
		</view>
	</uni-popup>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad, onNavigationBarButtonTap } from "@dcloudio/uni-app"
import { getApartmentInfo } from '@/common/API/room'
import { getDictData } from '@/common/API/system'
import publicFacilities from '@/components/publicFacilities'
import config from '@/utils/config'
import roomList from '@/components/roomList/index.vue'
import { indexConfig } from '@/common/API/index'
import vrBanner from '@/components/vrBanner'

const current = ref(0)
const autoplay = ref(true)
const interval = ref(2000)
const duration = ref(500)
const roomId = ref()
const roomInfo = ref<any>({})
const layoutInfos = ref<any>({})
const publicFacilitiesArr = ref<any>([])
const roomsList = ref([])

onLoad((options)=> {
	roomId.value = options.roomId
	getPublicFac()
	getDetail()
	getRoomList()
})

const getDetail = async ()=> {
	let data = {
		apartmentId: roomId.value
	};
	let res = await getApartmentInfo(data);
	roomInfo.value = res.apartmentInfo;
	let useArr = []
	res.apartmentInfo.publicFacilities.forEach((e) => {
	  const item = publicFacilitiesArr.value.filter((ts) => ts.value == e)
	  if (item[0]) {
		useArr.push(item[0])
	  }
	})
	roomInfo.value.roomsFacilities = useArr
	layoutInfos.value = res.layoutInfos;
}
const goRoomTypeDetail = (layoutId) => {
	uni.navigateTo({
		url:`layoutDetail?layoutId=${layoutId}&roomId=${roomId.value}&roomName=${roomInfo.value.apartmentName}`
	});
}
const appointment = () => {
	if(uni.getStorageSync('userId')){
		uni.navigateTo({
			url:`roomTypeList?roomId=${roomId.value}`
		});
	}else{
		uni.navigateTo({
			url:`/pages/login/login`
		});
	}
}
const getPublicFac = async ()=>{
	if(uni.getStorageSync('apartmentPublicFacilities')){
		publicFacilitiesArr.value = uni.getStorageSync('apartmentPublicFacilities')
	}else{
		let res = await getDictData({
			pageNo: 1,
			pageSize: 30,
			dictType: 'rooms_apartment_public_facilities'
		})
		publicFacilitiesArr.value = res.list
		uni.setStorageSync('apartmentPublicFacilities',res.list)
	}
}

const changeBanner = async(e)=>{
	current.value = e.detail.current
	// console.log(e.detail.current)
}

const getRoomList = async()=> {
	let data = {
		lat: uni.getStorageSync('positionLat'),
		lon: uni.getStorageSync('positionLon'),
		apartmentId: roomId.value
	}
	let res = await indexConfig(4,data)
	roomsList.value = res.items
}

// 打开优惠弹窗
const popup = ref(null)
const openPoup = () => {
	popup.value.open()
}

//分享微信
onNavigationBarButtonTap(()=>{
	uni.share({
		provider: "weixin",
		scene: "WXSceneSession",
		type: 5,
		miniProgram: {
		    id:  config.wxChatAppId,
		    path: `/pages/searchRoom/roomDetail?roomId=${roomId.value}`,
			type: 0,
			webUrl: 'http://uniapp.dcloud.io'
		},
		title: "南舒房",// 分享标题
		summary: roomInfo.value.apartmentName,// 分享内容文字
		imageUrl: `${roomInfo.value.picUrl[0]}@oosImage|384h_480w_0e`,//分享封面图片
		success: function(res) {
			console.log(res)
		},
		fail: function(err) {
			console.log(err)
		}
	});
})
</script>
<style lang="scss" scoped>
.content{
	height: 100%;
	.banner{
		position: relative;
		.swiper{
			height: 516rpx;
			.swiper-item{
				width: 100%;
				height: 516rpx;
			}
		}
		.numbox{
			position: absolute;
			right: 32rpx;
			bottom: 18rpx;
			background: rgba(0,0,0,0.3);
			border-radius: 200rpx;
			color: #fff;
			padding: 0 20rpx;
			line-height: 36rpx;
			font-size: 24rpx;
		}
	}
	.roomInfo{
		background: #fff;
		padding: 36rpx 32rpx 0;
		.name{
			font-size: 40rpx;
			font-weight: bold;
			line-height: 56rpx;
		}
		.info{
			font-size: 24rpx;
			color: #666;
			line-height: 34rpx;
			margin: 10rpx 0 12rpx;
		}
		.service{
			border-bottom: 2rpx solid #EAEAE9;
			.tabbox{
				flex: 1;
				.tab{
					display: inline-block;
					line-height: 44rpx;
					padding: 0 20rpx;
					font-size: 24rpx;
					margin-right: 16rpx;
					border-radius: 8rpx;
					color: #A68868;
					background: #F5F2F0;
					&:last-child{
						margin: 0;
					}
				}
			}
			.price{
				font-size: 24rpx;
				color: #666;
				.yellow{
					font-size: 48rpx;
					font-weight: bold;
					margin-right: 6rpx;
				}
			}
		}
	}
	.address{
		margin: 0 0 16rpx;
		padding-top: 10rpx;
		background: #fff;
		::v-deep.uni-list{
			.uni-list-item__icon{
				margin: 0 10rpx 0 0;
				.uni-list--sm{
					width: 28rpx;
					height: 28rpx;
					margin: 0;
				}
			}
			.youhui{
				.uni-list--base{
					width: 56rpx;
					height: 32rpx;
					margin: 6rpx 4rpx 0 0;
				}
				.uni-list-item__content-title{
					height: 42rpx;
					line-height: 42rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			}
			.uni-list--border-top{
				display: none;
			}
			.uni-list-item__container{
				padding: 10rpx 32rpx 24rpx;
				.uni-list-item__content .uni-list-item__content-title{
					color: #666;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			}
		}
	}
	.mainBox{
		padding: 0 0 120rpx;
		.mainTit{
			font-weight: bold;
			margin: 0 0 10rpx;
		}
		.roomTypeBox{
			background: #fff;
			padding: 18rpx 32rpx 10rpx;
			margin: 0 0 16rpx;
			.typeList{
				.list{
					flex: 0 0 320rpx;
					margin-right: 20rpx;
					.pic{
						width: 320rpx;
						height: 216rpx;
						border-radius: 8rpx;
						overflow: hidden;
						position: relative;
						.full{
							position: absolute;
							top: 0;
							left: 0;
							width: 320rpx;
							height: 216rpx;
							background: rgba(0, 0, 0, 0.4);
							color: #fff;
							line-height: 216rpx;
							text-align: center;
						}
					}
					.roomMess{
						flex: 1;
						padding: 20rpx 0 0;
						.name{
							font-size: 28rpx;
							color: #4D4D4D;
							line-height: 34rpx;
						}
						.tabbox{
							font-size: 24rpx;
							line-height: 28rpx;
							margin-top: 8rpx;
							.area{
								font-size: 20rpx;
								line-height: 32rpx;
								color: #999;
								max-width: 320rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							.price{
								font-size: 24rpx;
								line-height: 32rpx;
								color: #999;
								margin-top: 8rpx;
								.yellow{
									font-size: 28rpx;
									font-weight: bold;
								}
							}
						}
					}
				}
			}
		}
		.installationBox{
			background: #fff;
			padding: 18rpx 32rpx 0;
			.mainTit{
				margin: 0 0 30rpx;
			}
			.insList{
				flex-wrap: wrap;
				.list{
					flex: 0 0 20%;
					text-align: center;
					margin: 0 0 42rpx;
					.icon{
						width: 44rpx;
						height: 44rpx;
						margin: 0 auto;
					}
					.text{
						line-height: 36rpx;
						margin: 4rpx 0 0;
					}
				}
			}
		}
		.erPicBox{
			background: #fff;
			padding: 18rpx 32rpx 42rpx;
			margin: 16rpx 0 16rpx;
			.mainTit{
				margin: 0 0 12rpx;
			}
			.pic{
				width: 180rpx;
				height: 180rpx;
				margin: 0 auto;
			}
		}
		.introBox{
			padding: 18rpx 32rpx 40rpx;
			margin: 0 0 16rpx;
			background-color: #fff;
			background: url('#{$imgUrl}/icon/zbpt_bg.png') no-repeat 580rpx bottom,#fff;
			background-size: 100rpx 130rpx;
			.intro{
				font-size: 24rpx;
				line-height: 36rpx;
				color: #666;
				white-space: pre-wrap;
			}
			&.jtlx{
				background: url('#{$imgUrl}/icon/jtlx_bg.png') no-repeat 580rpx bottom,#fff;
				background-size: 132rpx 94rpx;
			}
		}
		.roomTit{
			padding: 0 32rpx;
			font-size: 32rpx;
			line-height: 42rpx;
			margin: 40rpx 0 30rpx;
			font-weight: bold;
			color: #000;
		}
	}
	.btnBox{
		background: #fff;
		padding: 20rpx 32rpx 24rpx;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		z-index: 99;
		.phone{
			width: 327rpx;
			height: 76rpx;
			line-height: 76rpx;
			font-size: 30rpx;
			border-radius: 44rpx;
			background: #F7F7F7;
			margin-right: 32rpx;
			&::after{
				display: none;
			}
		}
		.look{
			width: 327rpx;
			height: 76rpx;
			line-height: 76rpx;
			font-size: 30rpx;
			border-radius: 44rpx;
			background: $uni-color-primary;
			color: #fff;
			&::after{
				display: none;
			}
		}
	}
}
.popBox{
	background: #fff;
	padding: 54rpx 32rpx 0;
	border-radius: 32rpx 32rpx 0 0;
	.popTit{
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 48rpx;
		margin: 0 0 20rpx;
	}
	.popTxt{
		white-space: pre-wrap;
		max-height: 600rpx;
		overflow-y: scroll;
		padding-bottom: 100rpx;
	}
}
</style>
